<template>
	<view class="homecontent flex-col fill-height" :class="$thatThemeClassName">
		<uv-sticky class="sticky_content fill-width">
			<view class="search fill-width">
				<uv-search bgColor="white" placeholder="请输入搜索内容" v-model="keyword" shape="round" clearabled @search="toSearch"></uv-search>
			</view>
		</uv-sticky>
		
		<swiper class="fill-width-height">
		  <swiper-item v-for="(item,index) in homeSwiperTypeList" :key="index" >
			<HomeItem :typeDataList="item.typeDataList" />
		  </swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import { getPage, getDetailsList, getCollectList } from '@/api/home'
	import { useCommonStore } from '@/store/common'
	const commonStore = useCommonStore()
	import sharePages from '@/framework/plugins/sharePages'
	import { addCountVisits } from '@/api/common/common'
	import { clearImageListCache,setImageListCache } from '@/hooks/common'
	import { getTypeList } from '@/api/list/search'
	import HomeItem from './homeItem'
	export default {
		mixins: [sharePages],
		components: {
			HomeItem
		},
		data() {
			return {
				keyword: '',
				current: 0,
				detailList: [],
				shareTitle: '灰灰的图库',
				sharethumb: '/static/other/share_home.jpg',
				homeSwiperTypeList: []
			}
		},
		methods: {
			toSearch() {
				commonStore.setKeyword({
					keyword: this.keyword
				})
				this.$bus.$emit('searchKeyWord', this.keyword)
				uni.switchTab({
					url: '/pages/gridList/index'
				});
			},
			async getHomeSwiperTypeList() {
				const homeSwiperTypeList = await getTypeList({ bustype: 'home' }).then((res) => res.data)
				this.homeSwiperTypeList = homeSwiperTypeList
			},
			async getManageTypeList() {
				const { rows } = await getPage({ pageNum: 1, pageSize: 100 });
				// 全部卡片
				const allTypeDataList = rows;
				
				// 每个卡片里的图或者合集
				const collIds = allTypeDataList.filter(item => item.cardtype === 'coll').map(item => item.id)
				const imagesIds = allTypeDataList.filter(item => item.cardtype !== 'coll').map(item => item.id)
				let allDetailList = []
				if(collIds?.length > 0){
					let detailList = await this.getCollectList(collIds.join(',')) || []
					allDetailList.push(...detailList)
				}
				if(imagesIds?.length > 0){
					let detailList = await this.getDetailsList(imagesIds.join(',')) || []
					allDetailList.push(...detailList)
				}
				allTypeDataList.forEach(item => {
					item.detailList = allDetailList?.filter(ditem => ditem.indexmanageid === item.id) || []
				})
				
				// 分组
				this.homeSwiperTypeList?.forEach(item => {
					item.typeDataList = allTypeDataList.filter(ty => ty.hometypeid === item.id) || []
				})
			},
			getDetailsList(indexmanageid) {
				return getDetailsList({
					indexmanageid: indexmanageid
				}).then(res => {
					return res.data
				})
			},
			getCollectList(indexmanageid) {
				return getCollectList({
					indexmanageid: indexmanageid
				}).then(res => {
					return res.data
				})
			},
		},
		mounted() {
			addCountVisits()
		},
		async onLoad() {
			await this.getHomeSwiperTypeList()
			this.getManageTypeList()
		},
	}
</script>

<style lang="scss" scoped>
	.search {
		background: white;

		:deep(.uv-search__action--active) {
			padding: 6px;
			border-radius: 5px;
			background: #377ff5;
			color: white;
			margin: 0;
			// border-top-left-radius: 0;
			// border-bottom-left-radius: 0;
		}

		:deep(.uv-search) {
			padding: 10px;
		}

		:deep(.uv-search__action.uv-search__action--active) {
			display: none;
		}

		:deep(.uv-search__content) {
			margin: 0;
			// border-top-right-radius: 0 !important;
			// border-bottom-right-radius: 0 !important;
		}
	}

	:deep(.icon_contain){
		.uv-icon{
			flex: 1;
		}
	}

	.sticky_content {
		width: 100% !important;
	}

	:deep(.uv-cell__title) {
		font-weight: bold;
		padding: 3px 0;
	}

	:deep(.uv-cell-group__wrapper .uv-line) {
		display: none;
	}
	
	:deep(.uv-grid){
		min-height: 25vw;
	}

	.homecontent {
		:deep(.uv-sticky) {
			width: 100% !important;
		}

		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;

		.search {
			width: 100%;
		}
		
	}
	
	
</style>